<template>
  <div class="member-order">
    <!-- tabs组件 -->
    <xtx-tabs v-model="activeName" @tab-click="clickTab">
      <xtx-tabs-panel
        v-for="item in orderStatus"
        :key="item.name"
        :name="item.name"
        :label="item.label"
      ></xtx-tabs-panel>
    </xtx-tabs>
    <!-- 订单列表 -->
    <div class="order-list">
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
      <orderItem
        v-for="item in orderList"
        :key="item.id"
        :order="item"
        @on-cancel-order="onCancelOrder(item)"
        @on-delete-order="onDeleteOrder(item)"
        @on-confirm-order="onConfirmOrder(item)"
        @on-logistics-order="onLogisticsOrder(item)"
      ></orderItem>
    </div>

    <!-- 分页组件 -->
    <xtx-pagination
      v-if="total > 0 && orderList.length > 0"
      :current-page="reqParams.page"
      :page-size="reqParams.pageSize"
      :total="total"
      @current-change="reqParams.page = $event"
    ></xtx-pagination>
    <!-- 对于像：对话框，消息提示，确认提示，通知组件 适合使用传送门 Teleport -->
    <!-- 取消原因组件 -->
    <Teleport to="#dialog">
      <orderCancel ref="orderCancelCom" />
    </Teleport>

    <!-- 查看物流组件 -->
    <Teleport to="#dialog">
      <orderLogistics ref="logisticsOrderCom" />
    </Teleport>
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import { orderStatus } from '@/api/constants'
import { findOrderList, deleteOrder, confirmOrder } from '@/api/order'
import orderItem from './components/order-item.vue'
import orderCancel from './components/order-cancel.vue'
import orderLogistics from './components/order-logistics.vue'
import confirm from '@/components/library/confirm'
import { message } from '@/components/library/message'
export default {
  name: 'MemberOrder',
  components: { orderItem, orderCancel, orderLogistics },
  setup() {
    // tabs组件切换
    const activeName = ref('all')
    // 查询订单参数
    const reqParams = reactive({
      page: 1,
      pageSize: 5,
      orderState: 0
    })
    // 点击选项卡
    const clickTab = (tab) => {
      // 此时：tab.index 就是订单的状态
      reqParams.orderState = tab.index
      reqParams.page = 1
    }

    // 订单列表
    const orderList = ref([])
    const total = ref(0)
    const loading = ref(false)
    // 发送请求 - 查询订单
    const findOrderListFn = () => {
      loading.value = true
      findOrderList(reqParams).then((data) => {
        orderList.value = data.result.items
        total.value = data.result.counts
        loading.value = false
      })
    }
    // 使用侦听器，监听 requestParams 的改变
    watch(
      reqParams,
      () => {
        findOrderListFn()
      },
      { immediate: true }
    )

    // 删除订单
    const onDeleteOrder = (item) => {
      confirm({ text: '您确认删除该条订单吗？' })
        .then(() => {
          deleteOrder([item.id]).then(() => {
            message({ message: '删除订单成功！', type: 'success' })
            findOrderListFn()
          })
        })
        .catch((e) => {})
    }

    return {
      activeName,
      clickTab,
      orderStatus,
      orderList,
      total,
      loading,
      reqParams,
      onDeleteOrder,
      ...useCancelOrder(),
      ...useconfirmOrder(),
      ...useLogisticsOrder()
    }
  }
}
// 封装逻辑 - 取消订单
export const useCancelOrder = () => {
  const orderCancelCom = ref(null)
  const onCancelOrder = (item) => {
    // item就是要取消的订单
    orderCancelCom.value.open(item)
  }
  return { onCancelOrder, orderCancelCom }
}
// 封装逻辑 - 查看物流
export const useLogisticsOrder = () => {
  const logisticsOrderCom = ref(null)
  const onLogisticsOrder = (item) => {
    logisticsOrderCom.value.open(item)
  }
  return { onLogisticsOrder, logisticsOrderCom }
}
// 封装逻辑 - 确认收货
export const useconfirmOrder = () => {
  const onConfirmOrder = (item) => {
    // item 就是你要确认收货的订单
    confirm({ text: '您确认收货吗？确认后货款将会打给商家' }).then(() => {
      confirmOrder(item.id).then(() => {
        message({ message: '确认收货成功！', type: 'success' })
        // 确认收货后状态变成 待评价
        item.orderState = 4
      })
    })
  }
  return { onConfirmOrder }
}
</script>
<style scoped lang="less">
.member-order {
  height: 100%;
  background: #fff;
}
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9) url(../../../assets/images/loading.gif)
    no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>
